<template>
	<view id="list">
		<u-sticky>
			<u-gap height="5" bgColor="#eee"></u-gap>
			<view class="info-time">
				<text class="datetime"
					@click="toBack">{{ queryParam.projectName }}</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<u-gap height="5" bgColor="#eee"></u-gap>
		</u-sticky>
		<view class="list-wrap">
			<view class="my-list">
				<view class="my-list-item" v-for="(item, index) in patrolList" :key="item.id">
					<view class="fix-btn" v-if="queryParam.type != 1">
						<u-button size="mini" type="success" v-if="queryParam.status == 'finish'">已完结</u-button>
						<u-button size="mini" type="error" v-if="queryParam.status == 'unfinish'">未完结</u-button>
					</view>
					<navigator :url="`../detail/detail?id=${item.id}`">
						<view class="list-item-title">
							<view>
								<text class="title-tit">检查人员：</text>
								<text class="title-txt">{{ item.checkPersonName }}</text>
							</view>
							<view>
								<text class="title-tit">检查类型：</text>
								<text v-if="item.type == 0" class="title-txt txt-b">日常巡检</text>
								<text v-if="item.type == 1" class="title-txt txt-w">专项检查</text>
							</view>
							<view>
								<text class="title-tit">项目名称：</text>
								<text class="title-txt">{{ item.projectName }}</text>
							</view>
							<view>
								<text class="title-tit">检查时间：</text>
								<text class="title-txt">{{ item.checkTime | date('yyyy-mm-dd') }}</text>
							</view>
							<view>
								<text class="title-tit">所属区域：</text>
								<text class="title-txt">{{ item.areaName }}</text>
							</view>
							<view v-if="queryParam.type != 1 && item.rectifyDemand">
								<text class="title-tit">整改要求：</text>
								<text class="title-txt txt-r">{{ item.rectifyDemand }}</text>
							</view>
							<view v-if="queryParam.type != 1 && item.rectifyTime">
								<text class="title-tit">整改期限：</text>
								<text class="title-txt txt-r">{{ item.rectifyTime | date('yyyy-mm-dd') }}</text>
							</view>
							<view v-if="queryParam.type != 1 && item.rectifySuccTime">
								<text class="title-tit">整改时间：</text>
								<text class="title-txt txt-r">{{ item.rectifySuccTime | date('yyyy-mm-dd') }}</text>
							</view>
							<view v-if="item.rectifyResult">
								<text class="title-tit">整改回复：</text>
								<text class="title-txt">{{ item.rectifyResult }}</text>
							</view>
							<view v-if="queryParam.type != 1 && item.overseePersonName">
								<text class="title-tit">交办人：</text>
								<text class="title-txt">{{ item.overseePersonName }}</text>
							</view>
							<view v-if="queryParam.type != 1 && item.executePersonName">
								<text class="title-tit">执行人：</text>
								<text class="title-txt">{{ item.executePersonName }}</text>
							</view>
							<view v-if="queryParam.type == 4">
								<text class="title-tit">超期天数：</text>
								<text class="title-txt txt-r">{{ item.rectifyDay }}</text>
							</view>
							<view v-if="queryParam.type == 1">
								<text class="title-tit">备注：</text>
								<text class="title-txt" v-if="item.remark">{{ item.remark }}</text>
								<text class="title-txt" v-else>无</text>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="submit-btn">
			<!-- <u-button type="primary" size="large" text="新增" @click="toAdd"></u-button> -->
			<text class="btn-add" @click="toAdd">新增</text>
		</view>
	</view>
</template>

<script>
	import {
		getXjList
	} from '@/api/analysis'
	import config from '@/utils/defaultConfig'

	export default {
		data() {
			return {
				loadMore: false,
				queryParam: {
					pageNum: 1,
					status: '',
					type: '',
					projectId: '',
					projectName: '',
					startTime: '',
					endTime: '',
					reasonable: false
				},
				problemOpts: [
					config.isProblem
				],
				rectifyOpts: [
					config.isRectify
				],
				statusOpts: [
					config.status
				],
				typeOpts: config.type,
				problemLevOpts: [
					config.problemLevel
				],
				reportLevOpts: [],
				active: '',
				patrolList: [],
				showArea: false,
				cityColumns: [
					[],
					[]
				],
				cityLoading: false,
				areaList: [],
				showProblem: false,
				showRectify: false,
				showType: false,
				showReport: false,
				searchShow: false,
				searchForm: {},
				filterItemIcon: false
			}
		},
		onLoad(option) {
			for (const k in option) {
				this.queryParam[k] = option[k]
			}
			if (this.queryParam.type == 1) {
				uni.setNavigationBarTitle({
					title: '日常巡检'
				})
			}
			if (this.queryParam.type == 2) {
				if (this.queryParam.status === '') {
					uni.setNavigationBarTitle({
						title: '督察交办'
					})
				}
				if (this.queryParam.status === 'finish') {
					uni.setNavigationBarTitle({
						title: '督察交办-已完结'
					})
				}
				if (this.queryParam.status === 'unfinish') {
					uni.setNavigationBarTitle({
						title: '督察交办-未完结'
					})
				}
			}
			if (this.queryParam.type == 3) {
				if (this.queryParam.status === '') {
					uni.setNavigationBarTitle({
						title: '问题整改'
					})
				}
				if (this.queryParam.status === 'finish') {
					uni.setNavigationBarTitle({
						title: '问题整改-已完结'
					})
				}
				if (this.queryParam.status === 'unfinish') {
					uni.setNavigationBarTitle({
						title: '问题整改-未完结'
					})
				}
			}
			if (this.queryParam.type == 4) {
				if (this.queryParam.status === '') {
					uni.setNavigationBarTitle({
						title: '超期整改'
					})
				}
				if (this.queryParam.status === 'finish') {
					uni.setNavigationBarTitle({
						title: '超期整改-已整改'
					})
				}
				if (this.queryParam.status === 'unfinish') {
					uni.setNavigationBarTitle({
						title: '超期整改-未整改'
					})
				}
			}
			this.getPortal()
		},
		onReachBottom() {
			// this.loadMore = true
			this.queryParam.pageNum++
			this.getPortal()
		},
		onPullDownRefresh() {
			this.patrolList = []
			this.queryParam.pageNum = 1
			this.getPortal()
			uni.stopPullDownRefresh()
		},
		methods: {
			getPortal() {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				getXjList(this.queryParam).then(res => {
					const data = res.data.rows
					if (data.length > 0) {
						this.patrolList = this.patrolList.concat(res.data.rows)
					} else {
						uni.$u.toast('没有更多数据')
					}
					// this.patrolList = res.data.rows
				}).catch(error => {
					uni.$u.toast(error)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/packageD/detail/detail?id=' + id
				})
			},
			toAdd() {
				uni.navigateTo({
					url: '/packageB/form/add'
				})
			},
			toBack () {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	#list {
		font-size: 24upx;
		padding-bottom: 100upx;
		min-height: 100vh;
		background: #eee;
		.info-time {
			display: flex;
			justify-content: center;
			align-items: center;
			background: white;
			padding: 20upx 0;
			.datetime {
				margin: 0 10upx;
			}
		}
		.my-list {
			background-color: #eee;
			padding: 20upx;
			.my-list-item {
				position: relative;
				background: #fff;
				padding: 20upx;
				margin-bottom: 20upx;
				box-shadow: 0 2px 3px #ccc;
				border-radius: 8upx;
				.fix-btn {
					position: absolute;
					right: 10upx;
					bottom: 10upx;
					width: 100upx;
				}
				.list-time {
					position: absolute;
					right: 20upx;
					top: 20upx;
					height: 40upx;
					line-height: 40upx;
					color: #fff;
					.list-time-in {
						width: 100%;
					}
					.rectified, .not-rectified {
						padding: 0 18upx;
						border-radius: 4upx;
					}
					.rectified {
						background-color: #4491fd;
					}
					.not-rectified {
						background-color: #f8695f;
					}
				}
			}
		}

		.list-search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;

			.list-input {
				width: 80%;
			}

			.list-btn {
				widht: 20%;
			}
		}

		.list-tabs {
			display: flex;
			flex-direction: row;
			background: #fff;

			.tab-item {
				padding: 15upx 0;
				text-align: center;
				flex-grow: 1;
				font-weight: bold;
			}

			.tab-item.active {
				border-bottom: 2px solid $uni-color-primary;
			}
		}

		.list-filter {
			display: flex;
			flex-direction: row;
			padding: 0 15upx;
			background: #fff;

			.filter-item {
				flex-grow: 1;
				padding: 20upx 0;
				display: flex;
				font-size: 24upx;
				justify-content: center;
				font-weight: bold;
			}
			.filter-item-blue {
				color: $uni-color-primary;
			}
		}

		.list-wrap {
			padding-bottom: 100upx;

			.list-item-title {
				line-height: 52upx;
				.title-tit {
					font-weight: bold;
				}
				.txt-b {
					color: $u-primary;
				}
				.txt-w {
					color: $u-warning;
				}
				.txt-r {
					color: $u-error;
				}
			}

			.list-content {
				padding: 15upx;

				text {
					word-wrap: break-word;
				}
			}

			.list-tags {
				white-space: nowrap;
				width: 100%;
				height: 60upx;
				// border-top: 1px solid $u-light-color;
				// padding:10upx;
				.tag-item {
					margin-right: 5upx;
				}
			}
		}

		.search-wrap {
			padding: 20upx;

			.search-item-tags {
				display: flex;

				.search-item-tag {
					margin-right: 10upx;
				}
			}
		}

		.search-btn {
			padding: 0 20upx 25upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-btn-item {
				width: 45%;
			}

			.search-btn-item:first-child {
				padding-right: 20upx;
			}

			.search-btn-item:last-child {
				padding-left: 20upx;
			}
		}

		.submit-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
			background-color: #ffffff;
			height: 100upx;
			.btn-add {
				display: block;
				width: 40%;
				height: 72upx;
				line-height: 72upx;
				background-color: #55aaff;
				margin: 18upx auto;
				border-radius: 40upx;
				text-align: center;
				font-size: 32upx;
				color: #fff;
				background-image: linear-gradient(to right, #2595f9, #1eb8ee);
				box-shadow: 0 1px 4px 0px rgba(30,184,238,0.3);
			}
		}
	}

	.filter-item-icon .u-icon__icon {
		color: $uni-color-primary !important;
	}
</style>
